<template>
  <div class="tableList">
    <div class="onlyTable">
      <vxe-grid
        ref="table"
        class="table-tree"
        resizable
        show-overflow
        row-key
        keep-source
        size="small"
        border
        :data="transTableData"
        :columns="columns"
        :tree-config="{
          line: true,
          transform: true,
          parentField: 'parentTag',
          rowField: 'tag',
          iconOpen: '',
          iconClose: 'vxe-icon-square-plus',
        }"
        v-bind="isEdit ? vxeOptions : null"
        @edit-actived="editActivedEvent"
      >
        <template #d_itemName="{ row }">
          <template v-if="!row.parentTag">
            <i :class="$refs.table.isTreeExpandByRow(row) ? 'vxe-open_file' : 'vxe-close_file'"></i>
          </template>
          <template v-else>
            <i class="vxe-circle"></i>
          </template>
          <span>{{ !row.parentTag ? row.itemName : row.paramName }}</span>
        </template>
        <template #e_itemName="scope">
          <template v-if="!scope.row.parentTag">
            <i :class="$refs.table.isTreeExpandByRow(scope.row) ? 'vxe-open_file' : 'vxe-close_file'"></i>
          </template>
          <template v-else>
            <i class="vxe-circle"></i>
          </template>
          <vxe-input v-if="!scope.row.parentTag" v-model="scope.row.itemName" type="text" disabled></vxe-input>
          <vxe-input v-else v-model="scope.row.paramName" type="text" disabled></vxe-input>
        </template>
        <template #e_itemShortName="scope">
          <vxe-input v-model="scope.row.itemShortName" disabled type="text"></vxe-input>
        </template>
        <template #d_itemShortName="{ row }">
          <span>{{ row.itemShortName }}</span>
        </template>
        <template #d_salesUnit="{ row }">
          <span>{{ row.salesUnit }}</span>
        </template>
        <template #e_salesUnit="scope">
          <vxe-input v-model="scope.row.salesUnit" disabled type="text"></vxe-input>
        </template>
        <template #d_contractPrice="{ row }">
          <span>{{ row.contractPrice }}</span>
        </template>
        <template #e_contractPrice="{ row }">
          <vxe-input
            v-model="row.contractPrice"
            type="text"
            :disabled="isdisabled"
            @change="changeContractPrice(row)"
          ></vxe-input>
        </template>
        <template #d_unitPrice="{ row }">
          <span>{{ row.unitPrice }}</span>
        </template>
        <template #e_unitPrice="scope">
          <vxe-input v-model="scope.row.unitPrice" disabled type="text"></vxe-input>
        </template>
        <template #d_meanDiscountRate="{ row }">
          <span>{{ row.meanDiscountRate | formatMeanDiscountRate }}</span>
        </template>
        <template #d_totalPrice="{ row }">
          <span>{{ row.totalPrice || '' }}</span>
        </template>
        <!-- <template #e_totalPrice="scope">
          <vxe-input v-model="scope.row.totalPrice" disabled type="text"></vxe-input>
        </template> -->
        <template #d_detectQty="{ row }">
          <span>{{ row.detectQty }}</span>
        </template>
        <template #e_detectQty="scope">
          <vxe-input
            v-model="scope.row.detectQty"
            type="text"
            :disabled="isdisabled"
            @change="changeDetectQty(scope.row)"
          ></vxe-input>
        </template>
        <template #d_workingHours="{ row }">
          <span>{{ row.workingHours }}</span>
        </template>
        <template #d_totalWorkingHours="{ row }">
          <span>{{ row.totalWorkingHours }}</span>
        </template>
        <template #d_remarks="{ row }">
          <span>{{ row.remarks }}</span>
        </template>
        <template #d_modifier="{ row }">
          <span>{{ row.modifierName || row.creatorName }}</span>
        </template>
        <template #d_modifyTime="{ row }">
          <span>{{ (row.modifyTime || row.createTime) | parseTime('{y}-{m}-{d}') }}</span>
        </template>
        <!-- <template #operation="{ row }">
          <vxe-button v-if="!row.parentTag" type="text" status="primary" @click="add(row, 'bottom')"
            >添加检测参数</vxe-button
          >
          <vxe-button type="text" status="danger" @click="del(row)">删除</vxe-button>
        </template> -->
      </vxe-grid>
    </div>
  </div>
</template>
<script>
import Sortable from 'sortablejs';
import XEUtils from 'xe-utils';
import VXETable from 'vxe-table';

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const detectQtyValid = ({ row, cellValue }) => {
      if (!!row.parentTag && !row.detectQty) {
        return new Error('检测工程量不能为空');
      }
    };
    const validRules = {
      detectQty: [{ required: true, validator: detectQtyValid }],
    };
    return {
      dialogVisible: false,
      showEdit: false,
      isEnabledFlag: false,
      isdisabled: false,
      types: [
        {
          name: '项目商务状态档案',
        },
      ],
      vxeOptions: {
        'row-config': { isHover: true, isCurrent: true },
        'radio-config': { labelField: 'groupName' },
        'scroll-y': { enabled: false },
        'edit-rules': validRules,
        'edit-config': {
          trigger: 'click',
          mode: 'row',
          showStatus: true,
          showIcon: false,
        },
      },
      selectRow: null,
      exportTableData: [],
      mergeCells: [],
      total: null,
      stdColumn: [
        {
          type: 'checkbox',
          title: '',
          width: 60,
          editRender: {},
        },
        {
          field: 'dictValue',
          title: '检测标准',
          editRender: {},
        },
      ],
      stdTotal: 0,
      curRow: null,
    };
  },
  filters: {
    formatStatus(val) {
      return val ? '启用' : '停用';
    },
    formatMeanDiscountRate(val) {
      if (val === '' || val === undefined || val === null) return;
      return (val * 100).toFixed(2);
    },
  },
  computed: {
    transTableData() {
      function flatten(arr = [], parent = {}) {
        return arr.reduce(function (prev, item, i) {
          item.tag = item.id || Date.now() + '' + i;
          item.parentTag = parent.tag;
          return prev.concat(item, flatten(item.chargeParamList || [], item));
        }, []);
      }
      return flatten(this.tableData);
    },
  },
  created() {},
  mounted() {},
  methods: {
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      if (!query) {
        query = window.location.hash.split('?')[1];
      }
      if (!query) {
        return;
      }
      var vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (pair[0] == variable) {
          return decodeURIComponent(pair[1]);
        }
      }
      return '';
    },
    editActivedEvent({ row, rowIndex }) {
      this.isdisabled = !row.parentTag;
    },
    openDetectionStd(row) {
      this.curRow = row;
      this.$refs.selectStd.dialogVisible = true;
    },
    editEvent(row) {
      this.selectRow = row;
      this.showEdit = true;
    },
    async del(row) {
      const $table = this.$refs.table;
      await $table.remove(row);
    },
    changeDetectQty(row) {
      row.totalWorkingHours = (row.detectQty * row.workingHours).toFixed(2);
      row.totalPrice = (row.detectQty * (row.contractPrice || 0)).toFixed(2);
    },
    changeContractPrice(row) {
      row.totalPrice = (row.detectQty * (row.contractPrice || 0)).toFixed(2);
      row.meanDiscountRate = row.contractPrice / row.unitPrice;
    },
  },
};
</script>
<style lang="scss" scoped>
.onlyTable {
  height: calc(100% - 20px) !important;
}
</style>
